// 尝试发送请求
axios.get('/dashboard').then(({data:res})=>{
  // console.log(res);
  // // 结构方案1
  // let{message,data:{groupData,overview}}=res
  // console.log(overview);

  // 结构方案2
  let {overview,year,salaryData,groupData,provinceData} = res.data
  console.log(overview);

  // 设置最上面的概览区的数据
  for(let key in overview) {
    document.querySelector(`[name=${key}]`).innerHTML=overview[key]
  }

  // 调用创建图表的函数：
  lineChart(year) //折线图
  classSalaryChart(salaryData) //饼图
  sexSalaryChart(salaryData) //饼图
  groupSalaryChart(groupData)//柱状图
  mapChart(provinceData)//地图

})
// axios({
//   url:'/dashboard',
//   // 请求头
//   headers:{
//     // Authorization:'真正的token'
//     Authorization:localStorage.getItem('token')
//   }
// }).then(result=>{
//   console.log(result);
// })


//----------------------折线图：全学科薪资走势-------------------
// 1.得有盒子(已经有了id="line")
// 2.引入echart.min.js
function lineChart(data) {
    // let symbolPoint={
    //     value:15000,
    //     symbolSize:20,
    //     // symbol:'imgage：//...'图片
    // }
// 3.初始化echarts
let myChart = echarts.init(document.querySelector('#line'))
// 4.配置项
let option = {
    title:{
        text:'2022全学科薪资走势',
        titleStyle:{
            fontsize:16,
            // color:''
        },
        left:10,
        top:15
    },
    xAxis: {
      type: 'category',
      // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      data:data.map(item => item.month),
      //   x轴上的文字
      axisLabel:{
        color:'#999'
      },
      //   轴线
      axisLine:{
        lineStyle:{
            color:'#ccc',
            type:'dashed'
        }
      }

    },
    yAxis: {
      type: 'value',
      splitLine:{
        lineStyle:{
            type:'dashed'
        }
      }
    },
    // 鼠标移入提示：
    tooltip:{
        trigger:'axis'
    },
    // 网格
    grid:{
        top:'20%'
    },
    //颜色  color:['颜色1','颜色2']
    color:{
    type: 'linear',//渐变类型-线性渐变
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: '#499FEE' // 0% 处的颜色
    }, 
    {
        offset: 1, color: '#5D75F0' // 100% 处的颜色
    }],
    global: false // 缺省为 false
    },
    series: [
      {
        // data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
        data: data.map(item => item.salary),
        type: 'line',
        smooth: true,//平滑曲线
        // 线条样式
        lineStyle:{
            width:6
        },
        // 线条上标记的对象
        symbolSize:10,
        // 
        areaStyle:{
            color:{
                type: 'linear',//渐变类型-线性渐变
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#499FEE' // 0% 处的颜色
                }, 
                {
                    offset: 0.8, color: 'rgba(255,255,255,0.2)'
                },
                {
                    offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }],
            }
        }
      }
    ]
  };
// 5.创建图表
myChart.setOption(option)//第一个o大写
}
// lineChart()



//--------------------饼图：班级薪资分布(右上角)-------------------
function classSalaryChart(data) {
    let myChart = echarts.init(document.querySelector('#salary'))
    let option = {
        title:{
            text:'班级薪资分布',
            titleStyle:{
                fontsize:16,
                // color:''
            },
            left:10,
            top:15
        },
        // 鼠标移入提示
        tooltip: {
          trigger: 'item'
        },

        legend: {
          bottom: '5%',
          left: 'center'
        },
        color:['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        series: [
          {
            name: '班级薪资分布',
            type: 'pie', //表示饼图
            center:['50%','50%'],//中心点坐标
            radius: ['50%', '64%'], //内外圈半径
            // avoidLabelOverlap: false,
            // 每个扇形区域的样式
            itemStyle: {
              borderRadius: 10, //圆角
              borderColor: '#fff',//边框颜色
              borderWidth: 2//边框大小
            },
            label: {
              show: false,//每个扇形的描述文字，不显示
            //   position: 'center'
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '40',
            //     fontWeight: 'bold'
            //   }
            // },
            labelLine: {
              show: false //标签文字引导线，不需要
            },
            // data: [
            //   { value: 1048, name: '1万以下' },
            //   { value: 235, name: '1-1.5万' },
            //   { value: 580, name: '1.5-2万' },
            //   { value: 484, name: '2万以上' },
            // //   { value: 300, name: 'Video Ads' }
            // ]
            data: data.map(item => {
                return {
                  value: item.g_count + item.b_count,
                  name: item.label
                }
            })
          }
        ]
      };
    myChart.setOption(option)

}
// classSalaryChart()


//----------------------饼图：男女生平均薪资-------------------
function sexSalaryChart (data)  {
    let myChart = echarts.init(document.querySelector('#gender'))

    let option = {
        title: [
            {
              text: '男女薪资分布',
              // 距离顶部10，距离左边10，文字大小16
              left:10,
              top:10,
              fontsize:16
            },
            {
              text: '男生',
              // 距离顶部45%，距离左边45%，文字大小12
              left:'45%',
              top:'45%',
              fontsize:12
            },
            {
              text: '女生',
              // 距离顶部85%，距离左边45%，文字大小12
              left:'45%',
              top:'85%',
              fontsize:12
            },
          ],
        // 鼠标移入提示
        tooltip: {
          trigger: 'item'
        },

        legend: {
          bottom: '5%',
          left: 'center'
        },
        color:['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        series: [
          {
            name: '男生薪资分布',
            type: 'pie', //表示饼图
            center:['50%','30%'],//中心点坐标
            radius: ['20%', '30%'], //内外圈半径
            // data: [
            //   { value: 1048, name: '1万以下' },
            //   { value: 235, name: '1-1.5万' },
            //   { value: 580, name: '1.5-2万' },
            //   { value: 484, name: '2万以上' },
            // //   { value: 300, name: 'Video Ads' }
            // ]
            data: data.map(item => ({ name: item.label, value: item.b_count }))
          },
          {
            name: '班级薪资分布',
            type: 'pie', //表示饼图
            center: ['50%', '70%'], // 圆心点坐标
            radius: ['20%', '30%'], //内外圈半径
            // data: [
            //   { value: 1048, name: '1万以下' },
            //   { value: 235, name: '1-1.5万' },
            //   { value: 580, name: '1.5-2万' },
            //   { value: 484, name: '2万以上' },
            // //   { value: 300, name: 'Video Ads' }
            // ]
            data: data.map(item => ({ name: item.label, value: item.g_count }))
          }
        ]
      };
    
    myChart.setOption(option)
}
// sexSalaryChart()



//----------------------柱状图：班级每组薪资------------------
function groupSalaryChart(data)  {
    let myChart = echarts.init(document.querySelector('#lines'))
    
    let option = {
        xAxis: {
          type: 'category',
          // data: ['张三','李四','王五','赵六','路人甲','炮灰乙','流氓丙','土匪丁'],
          data: data[1].map(item => item.name),
          // x轴文字配置
          axisLabel: {
            color: '#999'
          },
          // 轴线设置
          axisLine: {
            // 轴线样式设置
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
         // Y轴分割线配置
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
            data: data[1].map(item => item.hope_salary),
            type: 'bar',
            name:'期望薪资'
          },
          {
            // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
            data: data[1].map(item => item.salary),
            type: 'bar',
            name:'就业薪资'
          }
        ],

        
        // 输入移入的提示
        tooltip: {},
        // 颜色设置 color: ['第1个柱子颜色', '第2个柱子颜色']
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#34D39A' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#499FEE' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        ],
        // 网格设置（向四外拉伸一下图表）
        grid: {
          top: 30,
          bottom: 50,
          left: 70,
          right: 30
        }
    }
    myChart.setOption(option)
    //找到8个按钮外的盒子，注册事件
   document.querySelector('#btns').addEventListener('click', function(e) {
   if (e.target.tagName === 'BUTTON') {
    //说明点击了某个按钮
    let i = e.target. innerHTML
    // console. Log(i) //组号12345 678
    //排他思想，处理效果
    document.querySelector('#btns .btn-blue' ).classList.remove('btn-blue')
    e.target.classList.add('btn-blue')
    //更换图表中的数据(点击的是第几组，图表中应该展示该组数据)
    option.xAxis.data=data[i].map(item=>item.name)
    option.series[0].data=data[i].map( item => item.hope_salary)
    option.series[1].data=data[i].map( item => item.salary )
    //修改了配置项之后，重新创建图表即可
    myChart.setOption(option)
   }
   })
  }
  // groupSalaryChart()


//----------------------地图：籍贯分布-------------------
function mapChart(data)  {
    //地图数据
    let mapData = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0},
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 }
    ] 

    mapData.forEach(item=>{
      let res = data.find(v=>{
        // return '条件'
        return v.name.includes(item.name)
      })
      // console.log(res)
      if(res) {
        item.value = res.value
      }
    })


    let myChart = echarts.init(document.querySelector('#map'))
    let option = {
        title: {
            text: '籍贯分布',
            top: 15,
            left: 10,
            textStyle: {
              fontSize: 16
            }
          },
        // 视觉映射
        visualMap:{
          type:'continuous',//连续型
          // type:'Piecewise'//分段型
          min:0,
          max:20,
          inRange:{
            color: ['#fff', '#0075F0']
          }
        },


        // 肯定需要配置的有：series
        // 做任何图形，最重要的，必须有的配置项是什么？系列数据
        series:[{
            name:'籍贯分布',
            type:'map', //表示图标的类型是地图
            map:'china',//中国地图
            // 默认的每个省的样式
            itemStyle:{
            areaColor:'#E0FFFF',//地图每个省的颜色
            borderColor:'rgba(0, 0, 0, 0.2)'//地图省界线的颜色
             },
            // 显示文本标签（每个区域、每个省的名字）
            label:{
              show:true,//让省的名字显示
              color: 'rgba(0, 0, 0, 0.7)',
              fontSize: 10
            },
            // 高亮状态
            emphasis:{
              itemStyle:{
                areaColor:'#34D39A',
                borderColor:0,
                shaowBlur:20,//阴影模糊大小
                //  阴影偏移
                shadowOffsetX:0,
                shadowOffsetY:0,
                shadowColor:'rgba(0, 0, 0, 0.5)',//阴影颜色
              }
            },
            data: mapData
        }],
    // 鼠标移入的提示
    tooltip: {
      formatter: '{b}：{c}位学员', // {a}是series里面的name；{b}表示每个区域的名字(省的名字)；{c}表示该地区的值
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      borderColor: 'transparent',
      textStyle: {
        color: '#fff'
      }
    }
  }
    myChart.setOption(option)
  }
  // mapChart()